<template>
  <el-dialog title="添加产品制程物料BOM" v-model="props.updataMaterialDialog" width="800px" :before-close="handleClose"
             append-to-body>
    <el-form :model="props.data" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="产品物料编码">
            <el-input v-model="props.data.productDomCode" placeholder="请选择此产品当前工序的BOM物料" readonly>
              <template #append>
                <el-button @click="addMaterial" :icon="Search"/>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="产品物料名称">
            <el-input
                v-model="props.data.productDomName"
                placeholder="请选择物料/产品"
                disabled
            />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="规格型号">
        <el-input v-model="props.data.specification" type="textarea" placeholder="请选择物料/产品" disabled/>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="单位">
            <el-input v-model="props.data.unit" placeholder="请选择物料/产品" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用料比例">
            <el-input v-model="props.data.quantity" placeholder="请输入用料比例"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </template>
    <ChooseMaterials :chooseMaterialDialog="chooseMaterialDialog" :code="initData.productCode" @close="closeMaterial"
                     @confirm="MaterialData"/>
  </el-dialog>
</template>

<script setup>
import {ref, watch} from 'vue'
import {Search} from '@element-plus/icons-vue'
import ChooseMaterials from "@/components/Process/ChooseMaterials.vue";
import {findProductByProductCode, updateProductDetails} from "@/apis/zyj/Process.js";
import {ElMessage} from "element-plus";


const props = defineProps({
  updataMaterialDialog: Boolean,
  data: Object,
})
const initData = ref()
watch(() => props.data, (newValue) => {
  initData.value = {...newValue}
})

const emit = defineEmits(['close'])

const chooseMaterialDialog = ref(false)

// 点击选择物料
const addMaterial = () => {
  chooseMaterialDialog.value = true
}
// 关闭选择物料弹窗
const closeMaterial = () => {
  chooseMaterialDialog.value = false
}

const MaterialData = (data) => {
  console.log(data)
  props.data.productDomCode = data.bomMaterialCode
  props.data.productDomName = data.bomMaterialName
  props.data.specification = data.bomMaterialSpec
  props.data.unit = data.bomUnit
  props.data.quantity = data.quantity
}

const handleClose = () => {
  emit('close')
}

const handleConfirm = () => {
  findProductByProductCode(props.data.procedureCode).then(res => {
    let a = true
    if (props.data.productDomCode === initData.value.productDomCode) {
      a = true
    } else {
      for (let i = 0; i < res.length; i++) {
        if (res[i].productDomCode === props.data.productDomCode) {
          ElMessage.error('该物料已添加')
          a = false
          return
        }
      }
    }
    if (a) {
      updateProductDetails(props.data).then(res => {
        if (res === '成功') {
          ElMessage.success('修改成功')
          handleClose()
        } else {
          ElMessage.error('修改失败')
        }
      })
    }
  })

}
</script>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>